<template>
  <!-- 
  
  这里 多使用一个 parentState 是因为，开始 将 state 的 visible 写到了 cancelDialog 里， 赋值给了 paraentVisible: 
  const cancelDialog = () => {
    visible: false,
    parentVisible: props.state.visible
  }
  但是通过 watch 发现 parentVisible 一直为 false，猜测可能是 将 props.state.visible 给 cancelDialog 的 state 的 parentVisible相当与解构，
  失去了响应式，所以 本组件没有隐藏，但实际好像并不对，因为在 cancelAccountDialog 组件里是对 parentVisible 进行了赋值，虽然前后都是 false ，
  但是应该是可以被 watch 到的，但是实际上没有产生反应，啊，不对，变为 true 有反应，本来是 false ，赋值 false 没反应。奇了怪了。
  在 sanwenzx 的组件里 那个 goback 的问题那，我记得是有反应的。啊，确实，实验了一下， 不管是 ref(false) 还是 reactive({ p: false }) 
  赋值 false 都不会激活 watch ，可能是我在 goback 那里初始设置了 undefined 所以才会有变化。
    -->
  <cancel-account-dialog :state="cancelDialog" :parentState="state"/>
  <el-dialog v-model="state.visible">
    <el-descriptions title="用户信息" :column="1">
        <el-descriptions-item label="用户名">{{ $store.getters.getUserInfo.username  }}</el-descriptions-item>
        <el-descriptions-item
          label="密码"
        >
          <el-button class="button" @click="changePassword.click">修改密码</el-button>
        </el-descriptions-item>
        <el-descriptions-item>
          <el-button type="danger" @click="cancelAccountClick">注销账户</el-button>
        </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
  <change-password-dialog :state="changePassword.state"></change-password-dialog>
</template>

<script>
import { ref, reactive, watch, defineComponent } from "vue";
import ChangePasswordDialog from "@c/navBar/user/ChangePasswordDialog.vue";
import CancelAccountDialog from "./CancelAccountDialog.vue";

export default defineComponent({
  name: "UserInfoDialog",
  props: {
    state: {
      visible: Boolean
    }
  },
  components: {
    ChangePasswordDialog,
    CancelAccountDialog,
  },
  setup(props) {
    
    const cancelDialog = reactive({
      visible: false,
      parentVisible: false,
    })
    
    watch(() => cancelDialog.parentVisible, (n, o) => {
      console.log("parentVisible2: ==> ", cancelDialog.parentVisible);
    })
    
    const changePassword = reactive({
      // 修改密码对话框状态
      state: {
        visible: false
      },
      // 点击修改密码
      click: () => {
        changePassword.state.visible = true;
      }
    })
    
    const cancelAccountClick = () => {
      cancelDialog.visible = true;
    }
    
    return {
      changePassword,
      cancelDialog,
      cancelAccountClick,
    }
  }
})
</script>

<style scoped>
.button {
  font-size: 14px;
  height: 5px;
}
[v-cloak] {
  display: none;
}
</style>
